import React, { PureComponent } from "react"
import { connect } from "react-redux"
import { addNumber } from "../store/features/counter"
import store from "../store"
import { changeBanners, changeRecommends, fetchHomeMultiDataAction } from "../store/features/home"
import axios from "axios"
// "http://123.207.32.32:8000/home/multidata"

export class Home extends PureComponent {
    componentDidMount() {
        this.props.fetchHomeMultiData()
        // axios
        //     .get("http://123.207.32.32:8000/home/multidata")
        //     .then((res) => {
        //         const banners = res.data.data.banner.list
        //         const recommends = res.data.data.recommend.list
        //         // store.dispatch(changeBanners(banners))
        //         // store.dispatch(changeRecommends(recommends))
        //         this.props.changeBanners(banners)
        //     })
        //     .catch((err) => {})
    }
    addNumber(num) {
        this.props.addNumber(num)
    }
    render() {
        const { counter, banners, recommends } = this.props
        return (
            <div>
                <h2>Home counter：{counter}</h2>
                <button onClick={() => this.addNumber(5)}>+5</button>
                <button onClick={() => this.addNumber(8)}>+8</button>
                <div className="banners">
                    <h2>轮播图列表数据</h2>
                    <ul>
                        {banners.map((item) => (
                            <li key={item.title}>{item.title}</li>
                        ))}
                    </ul>
                </div>
                <div className="recommends">
                    <h2>推荐列表数据</h2>
                    <ul>
                        {recommends.map((item) => (
                            <li key={item.title}>{item.title}</li>
                        ))}
                    </ul>
                </div>
            </div>
        )
    }
}

const mapStateToProps = (state) => ({
    counter: state.counter.counter,
    banners: state.home.banners,
    recommends: state.home.recommends,
})
const mapDispatchToProps = (dispatch) => ({
    addNumber(num) {
        dispatch(addNumber(num))
    },
    // changeBanners(banners) {
    //     dispatch(changeBanners(banners))
    // },
    fetchHomeMultiData() {
        dispatch(fetchHomeMultiDataAction())
    },
})

export default connect(mapStateToProps, mapDispatchToProps)(Home)
